<template>
  <Container class="manage-list role-list">
    <div slot="header" class="container-header group">
      <Input
        v-model.trim="list.form.keyword"
        class="start"
        placeholder="条码查询"
        clearable
        @on-enter="onSearchBtnClick"
      />
      </Input>
      <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick" />
    </div>
    <Tabs v-model="tab">
      <TabPane label="条码查询" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
          @on-selection-change="onSelectChange"
        />
        <Loader :status="list.status" @refresh="getData" />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import CodeListData from './list/CodeListData'
import { clearEmpty } from '@/util'
export default {
  name: 'operation/codeQuery/CodeQueryList',
  data () {
    return {
      ids: [],
      list: CodeListData,
      tab: 'tab1',
      // keyword: '',
      options: {
        tableHeight: 300
      }
    }
  },
  mounted () {
    this.initTable()
  },
  destroyed () {
    this.$bus.$off()
  },
  methods: {
    ...table,
    getData () {
      let param = {
        barcode: this.list.form.keyword
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$ajaxPost('/barcode/scan_list', param).then(data => {
        this.list.data = (data).map(item => {
          let { materialName, orderId, barcode, scanerName, scanDate, scanType, materialId, scanTypeStr } = item
          return { materialName, orderId, barcode, scanerName, scanDate, scanType, materialId, scanTypeStr }
        })
        this.list.status = 'pass'
        this.backTableTop()
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onSearchBtnClick () {
      if (this.list.form.keyword === '') {
        this.$Message.error('请输入条码进行查询')
        return
      }
      this.getData()
    }

  }

}
</script>
